React Portfolio Website Tutorial From Scratch - Build & Deploy React JS Portfolio Website (2022)

EGATOR
58.5K subscribers
800,535 views Feb 17, 2022 React JS Projects
React Portfolio Website Tutorial From Scratch - Build & Deploy React JS Portfolio Website Hostinger Discount: https://www.hostg.xyz/SH8cs Responsive React Portfolio Website with Theme Customization (FULL COURSE): https://www.udemy.com/course/react-js... Source Code, Assets & Live Demo: https://www.buymeacoffee.com/egator/e... Become a patron: https://patreon.com/egator In this practical react js project tutorial, I'm going to teach you, step-by-step, how to create and deploy a fully responsive personal portfolio website from scratch! By the end of this video, you will know how to create a react app from scratch, how to use the react icons library in your react projects, how to use react useState hooks, how to build modern website designs with CSS3, how to use SwiperJS (to create carousels/slides) in your react projects, how to add multiple contact options on your website (WhatsApp, Facebook Messenger, and Direct form submission using EmailJS), and more! No prior react knowledge is required for this tutorial, as I will be explaining every step along the way. Now Let's Build The Best React Personal Portfolio Website On YouTube! Assets: https://drive.google.com/file/d/18FpI... Timestamps 00:00:00 Intro (Project Overview) 00:08:43 Buying Hosting & Claiming Free Domain on Hostinger 00:11:38 Installing Node & VSCode 00:12:21 Assets 00:12:56 Creating our React App using npx create-react-app 00:14:22 Managing and Creating files & folders 00:20:15 Creating all Components 00:27:40 CSS Variables & General CSS Styles 00:45:00 Header Component JSX 00:52:42 Installing React Icons and Using them in our project 00:56:18 Header Component CSS 01:04:20 Header Component Responsive Design 01:06:45 Floating Nav Component JSX 01:13:57 Floating Nav Component CSS 01:18:00 Managing Nav States using useState Hook 01:21:43 About Component JSX 01:28:29 About Component CSS 01:35:15 About Component Responsive Design 01:38:45 Experience Component JSX 01:44:17 Experience Component CSS 01:50:40 Experience Component Responsive Design 01:53:35 Services Component JSX 01:57:25 Services Component CSS 02:02:35 Services Component Responsive Design 02:04:15 Portfolio Component JSX 02:10:10 Portfolio Component CSS 02:14:45 Portfolio Component Responsive Design 02:16:02 Generating Portfolio Items from Array using map method 02:20:44 Testimonials Component JSX 02:24:03 Testimonials Component CSS 02:29:15 Testimonials Component Responsive Design 02:30:26 Generating Testimonials from Array using map method 02:33:40 Creating Carousel/Slides using SwiperJS 02:40:23 Contact Component JSX (Multiple contact options: Facebook Messenger, WhatsApp & Email) 02:51:02 Contact Component CSS 02:57:02 Contact Component Responsive Design 02:58:34 Form Submission using EmailJS 03:07:43 Footer Component JSX 03:11:53 Footer Component CSS 03:16:30 Footer Component Responsive Design 03:18:50 Deploying Our React Website #reactjs #reactportfoliowebsite #reactjsprojects
Show less
I love the fact that you actually talk while you code, unlike some videos doing speed runs with crazy music in the background. Thank you so much!
165
This absolutely brilliant tutorial didn't miss anything. Really helped me understand CSS and how to make my own customizations. Great learning resource! Thank you!
I cannot thank you enough! This was such an amazing tutorial from start to finish. I was afraid of react but after this tutorial I can say I'm so much confident! Thank you again! 😀
12
This was such a pleasure to follow. You explain a lot of the HTML and general structure of the code. Learned a lot about CSS conventions and styling as well. I followed the entire tutorial, and now I'm excited to learn more and build upon this and make it my own. Thank you for the amazing tutorial!
38
sheer pleasure, I am speechless, this has to be by far the most intuitive and informative course on react I have ever seen, thanks for breaking things down and making such a wonderful video, you have gained a lifetime subscriber I look forward to go through all the other courses that you offer. #you are a great teacher, keep it up and thanks once again.
16
I appreciate you for making this video! Hoping to use this as the framework for my own portfolio with some personalized tweaks, plus this doubles as some excellent react training! Keep up the great content
7
Hands down one of the best React portfolio tutorials out here. Excellent work Sir! 👏🏿
1
This is one of those videos that I was able to watch and learn without needing stop because of complicated errors. I was able to make my first full stylized website thanks to you . I appreciate your work and Thank you so much ❤️❤️
25
Well I can't thank you enough. My version of this sleek, modern portfolio site is up and running. This is a big milestone for me and likely every future-dev out there. I won't forget who helped along the way. My hats is off sir.
21
Great tutorial - am halfway through 👍 Will tweak this with different colours and images to make it fit my portfolio. Thanks for the great effort and time you’ve put in to this tutorial. ❤️💙
Great tutorial! Really loved it! One suggestion: in the experience element, we can create a separate react component for the Article and pass the skill name and skill level as props. This will reduce the repetitions a lot!
1
Thank you man. Wow, I always wanted to learn front-end development and I definitely learned a lot throughout the whole build!! Thanks to you I built my first site ;) Cheers and thank you for all the effort that you are putting in your videos. Simply awesome brother <3
5
You're amazing just I wanted to say. Your file structure, way of teaching the concepts are really as good as a professional instructor's even better all of them. Thank you
13
Super tutorial for react beginners like me. This is a complete package for learning react as well as css. First react tutorial where css is also taken care properly. Everything is perfect and mastered, the way you explain things is next level... hats off to you man..! Learnt a lot from this tutoral. Huge ton of thanks!
2
I've been watching Youtube tutorials for like last 3 month and the only tutorial i found in which the tutor explains the CSS and does not copy it from somewhere is this video . CSS is a very underrated factor in front-end development no one cares about. Thanks sir for this good tutorial and LOVE when you say C'mon after every Typo LUL
3
Thank you so much for this fantastic video. I learnt a lot about css and react. Much more than my teacher learnt me in months. Keep up the good work. This was really helpful. So grateful 😀
This is an amazing tutorial! I've already completed two other tutorials from you! Thank you for making such great videos. I've one quick question regarding the active nav bar. How would you make nav icon active as I scroll through the section? It seems like the nav icon is set to active only when it is clicked. I'd really appreciate if you can suggest on this. Thank you again!
For anyone getting the error of having text of component names not showing up "Header" "Nav" etc. around 27:00 make sure you File >> Save All and text should then appear.
2
Extremely helpful especially for react beginners who wants to build a real-world project
1
Loved this project. One of the finest and detailed project ever. Love the way he proceeded. I will highly recommend to complete this once.